<template>
  <div class="notice-container">
    <el-card shadow="never">
      <!-- 搜索栏 -->
      <div class="filter-header">
        <el-input 
          v-model="filter.workId" 
          placeholder="工号"
          style="width: 120px"
          class="filter-item"
          clearable 
        />
        <el-input 
          v-model="filter.name" 
          placeholder="姓名"
          style="width: 120px; margin-left: 10px"
          class="filter-item"
          clearable 
        />
        <el-input 
          v-model="filter.title" 
          placeholder="主题"
          style="width: 140px; margin-left: 10px"
          class="filter-item"
          clearable 
        />
        <el-select 
          v-model="filter.status" 
          placeholder="状态"
          style="width: 120px; margin-left: 10px"
          clearable 
        >
          <el-option label="全部" value="" />
          <el-option label="通过" value="通过" />
          <el-option label="拒绝" value="拒绝" />
          <el-option label="待审核" value="待审核" />
        </el-select>
        <el-button type="primary" style="margin-left: 15px" @click="handleSearch">搜索</el-button>
        <el-button style="margin-left: 10px" @click="resetSearch">重置</el-button>
      </div>
 
      <!-- 操作按钮 -->
      <div class="action-buttons">
        <el-button type="success" :disabled="selection.length  === 0" @click="batchApprove">
          <el-icon><Check /></el-icon> 通过 
        </el-button>
        <el-button type="danger" style="margin-left: 15px" :disabled="selection.length  === 0" @click="batchReject">
          <el-icon><Close /></el-icon> 拒绝 
        </el-button>
      </div>
 
      <!-- 数据表格 -->
      <el-table 
        :data="filteredData"
        style="width: 100%"
        header-row-class-name="table-header"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="45" align="center"/>
        <el-table-column prop="id" label="编号" width="80"/>
        <el-table-column prop="title" label="主题" width="150"/>
        <el-table-column prop="workId" label="工号" width="100" align="center"/>
        <el-table-column prop="author" label="作者" width="120"/>
        <el-table-column prop="date" label="发帖时间" width="150"/>
        <el-table-column prop="status" label="状态" width="100" align="center">
          <template #default="scope">
            <el-tag :type="getStatusTagType(scope.row.status)"  size="small">{{ scope.row.status  }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="220" align="center">
          <template #default="scope">
            <el-button type="text" size="small" @click="handleEdit(scope.row)"> 编辑</el-button>
            <el-button 
              type="text" 
              size="small" 
              @click="handleApprove(scope.row)" 
              :disabled="scope.row.status  === '通过'"
            >通过</el-button>
            <el-button 
              type="text" 
              size="small" 
              @click="handleReject(scope.row)" 
              :disabled="scope.row.status  === '拒绝'"
            >拒绝</el-button>
          </template>
        </el-table-column>
      </el-table>
 
      <!-- 分页信息 -->
      <div class="pagination-info">
        第 1 到 {{ filteredData.length  }} 条，共 {{ filteredData.length  }} 条记录。
      </div>
    </el-card>
 
    <!-- 编辑对话框 -->
    <el-dialog v-model="editDialogVisible" title="编辑通知" width="50%">
      <el-form :model="currentNotice" label-width="80px">
        <el-form-item label="编号">
          <el-input v-model="currentNotice.id"  disabled></el-input>
        </el-form-item>
        <el-form-item label="主题" required>
          <el-input v-model="currentNotice.title"></el-input> 
        </el-form-item>
        <el-form-item label="工号">
          <el-input v-model="currentNotice.workId"></el-input> 
        </el-form-item>
        <el-form-item label="作者">
          <el-input v-model="currentNotice.author"></el-input> 
        </el-form-item>
        <el-form-item label="发帖时间" required>
          <el-date-picker 
            v-model="currentNotice.date" 
            type="datetime"
            placeholder="选择日期时间"
            value-format="yyyy-MM-dd"
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="状态">
          <el-select v-model="currentNotice.status"  placeholder="请选择状态">
            <el-option label="通过" value="通过"></el-option>
            <el-option label="拒绝" value="拒绝"></el-option>
            <el-option label="待审核" value="待审核"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="editDialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="saveEdit">确 定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>
 
<script setup>
import { ref, reactive, computed } from 'vue'
import { Check, Close } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'
 
// 过滤条件 
const filter = reactive({
  workId: '',
  name: '',
  title: '',
  status: ''
})
 
// 表格数据 
const tableData = ref([
  {
    id: 7,
    title: '通知',
    workId: '1',
    author: 'admin',
    date: '2020-02-09',
    status: '通过'
  },
  {
    id: 8,
    title: '紧急通知',
    workId: '1',
    author: 'admin',
    date: '2020-05-12',
    status: '通过'
  },
  {
    id: 9,
    title: '系统维护',
    workId: '2',
    author: 'user1',
    date: '2020-06-15',
    status: '待审核'
  },
  {
    id: 10,
    title: '会议通知',
    workId: '3',
    author: 'user2',
    date: '2020-07-20',
    status: '拒绝'
  }
])
 
// 选中行 
const selection = ref([])
 
// 对话框状态 
const editDialogVisible = ref(false)
const currentNotice = reactive({})
 
// 计算属性 - 过滤后的数据 
const filteredData = computed(() => {
  return tableData.value.filter(item  => {
    return (
      (filter.workId  === '' || item.workId.includes(filter.workId))  &&
      (filter.name  === '' || item.author.includes(filter.name))  &&
      (filter.title  === '' || item.title.includes(filter.title))  &&
      (filter.status  === '' || item.status  === filter.status) 
    )
  })
})
 
// 获取状态标签类型 
const getStatusTagType = (status) => {
  switch (status) {
    case '通过': return 'success'
    case '拒绝': return 'danger'
    case '待审核': return 'warning'
    default: return 'info'
  }
}
 
// 处理选中行变化 
const handleSelectionChange = (val) => {
  selection.value  = val 
}
 
// 搜索 
const handleSearch = () => {
  ElMessage.success(' 搜索完成')
}
 
// 重置搜索 
const resetSearch = () => {
  filter.workId  = ''
  filter.name  = ''
  filter.title  = ''
  filter.status  = ''
}
 
// 批量通过 
const batchApprove = () => {
  selection.value.forEach(item  => {
    item.status  = '通过'
  })
  ElMessage.success(` 已通过 ${selection.value.length}  条通知`)
  selection.value  = []
}
 
// 批量拒绝 
const batchReject = () => {
  selection.value.forEach(item  => {
    item.status  = '拒绝'
  })
  ElMessage.success(` 已拒绝 ${selection.value.length}  条通知`)
  selection.value  = []
}
 
// 单个通过 
const handleApprove = (row) => {
  row.status  = '通过'
  ElMessage.success(' 操作成功')
}
 
// 单个拒绝 
const handleReject = (row) => {
  row.status  = '拒绝'
  ElMessage.success(' 操作成功')
}
 
// 编辑 
const handleEdit = (row) => {
  Object.assign(currentNotice,  JSON.parse(JSON.stringify(row))) 
  editDialogVisible.value  = true 
}
 
// 保存编辑 
const saveEdit = () => {
  const index = tableData.value.findIndex(item  => item.id  === currentNotice.id) 
  if (index !== -1) {
    tableData.value.splice(index,  1, {...currentNotice})
    ElMessage.success(' 编辑成功')
  }
  editDialogVisible.value  = false 
}
</script>
 
<style scoped>
.notice-container {
  padding: 20px;
}
 
.filter-header {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}
 
.action-buttons {
  margin: 15px 0 20px;
}
 
.table-header th {
  background-color: #f5f7fa !important;
  font-weight: 600;
}
 
.pagination-info {
  margin-top: 15px;
  color: #909399;
  font-size: 13px;
  text-align: right;
  padding-right: 20px;
}
 
.el-button--text {
  padding: 0 5px;
}
 
/* 复选框样式 */
.el-table__header .el-checkbox__inner {
  border-radius: 2px;
  border-color: #DCDFE6;
}
</style>